<!-- yunqi002 于 2021/2/22 17:35 创建mindex.vue (商家列表)文件 -->
<template>
    <view class="container">
        <view class="main">
            <view class="item" v-for="(item) in merchants" :key="item.id" v-if="item.cmsMemberInfoDto">
                <u-row>
                    <u-col span="3" class="img"  @click="toMerchartDetail(item.id)">
                        <image class="logo" :style="item.smallSpuDtos.length > 0 ?'top: -85rpx;':''"  mode="widthFix" :src="item.cmsMemberInfoDto.logo"></image>
                    </u-col>
                    <u-col span="9">
                        <h4 class="title"  @click="toMerchartDetail(item.id)">{{item.cmsMemberInfoDto.nickName}}</h4>
                        <u-row class="info">
                            <u-col class="star" span="4"  @click="toMerchartDetail(item.id)">
                                <strong><text class="yticon icon-xingxing"></text>
                                    <span>4.9</span></strong>
                            </u-col>
                            <u-col class="e" span="6"  @click="toMerchartDetail(item.id)">
                                <span>月售36</span>
                            </u-col>
                            <u-col class="e" span="12"  @click="toMerchartDetail(item.id)">
                                地址：{{item.cmsMemberInfoDto.address}}
                            </u-col>
                            <u-col span="12" v-if="item.smallSpuDtos">
                                <u-row class="products">
                                    <u-col class="itemd" span="4" v-for="(mg) in item.smallSpuDtos" :key="mg.id" @click="showItem(mg.id)">
                                        <image mode="widthFix" :src="mg.thumb"></image>
                                        <view class="name">{{mg.name}}</view>
                                        <view class="price">￥{{mg.price}}</view>
                                    </u-col>

                                </u-row>
                            </u-col>
                        </u-row>
                    </u-col>
                </u-row>
            </view>
        </view>
    </view>
</template>

<script>
    import  { requestFun } from '@/utils/requestUtil'
    export default {
        data() {
            return {
                options: {},
				httpUrl: '',
				merchants:[],
				pageRequest: {
					index: 1,
					size: 20,
					sort: {
						descFields: ['id']
					},
					memberDto: {
						typeId: '1325697586887229440'
					}
				},
            }
        },
        components: {},
        onLoad(options) {
            var ts = this
            ts.initData()
        },
        onShow() {
			var ts = this
            requestFun('/api/member/findMembers','POST',ts.pageRequest,res=>{
                if(res.data.code=200){
                    ts.merchants = res.data.data.result;
                    if(res.data.data.next){
                        ts.pageRequest.index +=1;
                    }
                }
                // console.log(res.data);
            },error=>{
                console.error('请求出错了', error)
            })
        },
        methods: {
            initData() {

            },
            showItem(pid){
                uni.navigateTo({
                    url: "/pages/shop/merchant/mproduct?pid=" + pid,
                    success: res => {
                    },
                    fail: () => {
                    },
                    complete: () => {
                    }
                })
            },
			toMerchartDetail(merchantId){
				uni.navigateTo({
					url: "/pages/shop/merchant/mdetails?merchantId=" + merchantId,
					success: res => {
					},
					fail: () => {
					},
					complete: () => {
					}
				})
			}
        }
    }
</script>

<style lang="scss" scoped>
    page {
        background: #f6f6f6;
    }

    .container {
        .main {
            .item {
                background: #fff;
                margin: 10px;
                padding: 5px;
                border-radius: 10px;
                position: relative;

                image {
                    height: 70rpx;
                    width: 70%;
                }
                .title{
                    font-size: 32rpx;
                }
                .img{
                  image.logo {
                      //top: -90rpx;
                      position: relative;
                      width: 150rpx;
                      height: 150rpx;
                  }
                }
                .info{
                    line-height: 30px;
                    .star{
                        color: #e79339;
                    }
                    .e{
                        color: #545454;
                    }
                    .products{
                        line-height: 20px;
                        .itemd{
                            display: block;
                            text-align: center !important;
                            .name{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                -webkit-line-clamp:2;
                                display: -webkit-box;
                                -webkit-box-orient: vertical;
                            }
                            .price{
                                color: #ef5354;
                            }
                        }
                    }
                }
            }
        }
    }
</style>
